
<template>
  <div class="finance-list-container">
    <div class="label-content">资金记录</div>
    <div v-if="baseData.shopMessageStatus != 1" class="finance-list-main">
      <div class="list-header flex-between">
        <div class="tab-content flex-normal">
          <div :class="['tab-item flex-normal', tab.isSplit && 'split', currentTab.label == tab.label && 'active']" 
            v-for="(tab, index) in tabList" :key="index"
            @click="tabChange(tab)">
            <span class="tab-txt">{{ tab.label }}</span>
          </div>
        </div>
        <el-button size="small" type="primary" @click="exportShopFinance">导出</el-button>
      </div>
      <div class="list-main" v-if="currentTab.list" v-loading="currentTab.loading">
        <div class="item" v-for="(item, index) in currentTab.list" :key="index">
          <div class="item-label flex-normal">
            <span class="label-txt">交易编号：</span>
            <span class="label-val">{{ item.dealCode }}</span>
          </div>
          <div class="item-main flex-between">
            <div class="flex-column">
              <span class="main-val">{{ item.explain }}</span>
              <span class="time-val">{{ item.dealTime }}</span>
            </div>
            <div class="flex-column">
              <span class="main-val">{{ item.dealMoney }}</span>
              <span class="time-val">{{ item.dealType }}</span>
            </div>
          </div>
        </div>
      </div>
      <pagination
        v-show="currentTab.total > 0"
        :total="currentTab.total"
        :page.sync="currentTab.params.pageNum"
        :limit.sync="currentTab.params.pageSize"
        @pagination="getList"
      />
    </div>
    <div v-else class="kong-content flex-column">
      <svg-icon class="kong-svg" icon-class="finance-icon-5"></svg-icon>
      <span class="kong-desc">您的账户还未产生资金流水记录</span>
    </div>
  </div>
</template>

<script>
import {
  getLogList, exportShopFinance
} from "@/api/financeManage/shop-finance";
export default {
  props: {
    baseData: {
      type: Object,
      default: {
        shopMessageStatus: 1
      }
    },
  },
  data() {
    return {
      status: 0,
      tabList: [
        {label: '全部', isSplit: true, list: [], params: {pageNum: 1, pageSize: 10}, loading: false, total: 0},
        {label: '收入', isSplit: false, list: [], params: {pageNum: 1, pageSize: 10, dealType: '收入'}, loading: false, total: 0},
        {label: '支出', isSplit: true, list: [], params: {pageNum: 1, pageSize: 10, dealType: '支出'}, loading: false, total: 0},
        {label: '奖励', isSplit: false, list: [], params: {pageNum: 1, pageSize: 10, dealKind: "奖励"}, loading: false, total: 0},
        {label: '分享', isSplit: false, list: [], params: {pageNum: 1, pageSize: 10, dealKind: "分享"}, loading: false, total: 0},
        {label: '活动', isSplit: false, list: [], params: {pageNum: 1, pageSize: 10, dealKind: "活动"}, loading: false, total: 0},
        {label: '服务费', isSplit: true, list: [], params: {pageNum: 1, pageSize: 10, dealKind: "服务费"}, loading: false, total: 0},
        {label: '近3天', isSplit: false, list: [], params: {pageNum: 1, pageSize: 10, dealDay: '3'}, loading: false, total: 0},
        {label: '近7天', isSplit: false, list: [], params: {pageNum: 1, pageSize: 10, dealDay: '7'}, loading: false, total: 0},
        {label: '近30天', isSplit: false, list: [], params: {pageNum: 1, pageSize: 10, dealDay: '30'}, loading: false, total: 0},
      ],
      currentTab: {
        total: 0
      }
    };
  },
  mounted(){
    let _self = this
    _self.currentTab = _self.tabList[0]
    _self.getList()
  },
  methods: {
    exportShopFinance(){
      let _self = this
      let {dealType, dealKind, dealDay} = _self.currentTab.params
      let query = {
        "dealType": dealType || '', 
        "dealKind": dealKind || '', 
        "dealDay": dealDay || '' 
      }
      exportShopFinance(query, '资金记录')
    },
    tabChange(tab){
      let _self = this
      _self.currentTab = tab
      _self.getList()
    },
    async getList(){
      let _self = this
      let {params, loading} = _self.currentTab
      loading = true
      await getLogList(params).then(res => {
        let {rows, total} = res
        _self.currentTab.list = rows
        _self.currentTab.total = total
      })
      loading = false
    },
  }
};
</script>
<style scoped lang="scss">
::v-deep .pagination-container{
  background-color: transparent;
}
.finance-list-container {
  flex: 1;
  .label-content{
    font-size: 13px;
    color: #3D3D3D;
  }
  .kong-content{
    margin-top: vh(100);
    align-items: center;
    .kong-svg{
      width: vh(180);
      height: vh(180);
    }
    .kong-desc{
      color: #3D3D3D;
      font-size: 13px;
      margin-top: vh(15);
    }
  }
  .finance-list-main{
    margin-top: vh(15);
    background: #F8F8F8;
    border-radius: vh(3);
    overflow: hidden;
    padding: vh(15) vw(15);
    min-height: vh(800);
    .tab-content{
      .tab-item{
        position: relative;
        padding-right: vh(15);
        transition: .2s;
        &.split{
          margin-right: vh(15);
          &::after{
            content: '';
            width: 1px;
            height: vh(20);
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            background-color: #B1B1B1;
          }
        }
        &.active{
          .tab-txt{
            color: #3D3D3D;
          }
        }
        .tab-txt{
          font-size: vh(12);
          color: #B1B1B1;
          cursor: pointer;
        }
      }
    }
    .list-main{
      margin-top: vh(15);
      .item{
        background-color: #fff;
        border-radius: vh(3);
        padding: vh(10) vw(10);
        margin-bottom: vh(15);
        cursor: default;
        &:last-child{
          margin-bottom: 0;
        }
        .item-label{
          color: #7F7F7F;
          font-size: vh(12);
          .label-txt{
            margin-right: vw(8);
          }
        }
        .item-main{
          font-size: 13px;
          color: #3E3E3E;
          margin-top: vh(8);
        }
        .time-val{
          margin-top: vh(8);
          font-size: vh(12);
          color: #7F7F7F;
        }
      }
    }
  }
}
</style>